<template>
  <div>
    <div style="-webkit-font-smoothing: antialiased;text-transform: capitalize;">
      <el-container class="h-screen">
        <el-aside
          :width="isCollapse ? '96px' : '260px'"
          class="relative bg-white dark:bg-cool-gray-800 text-gray-700 dark:text-white transition transition-all duration-300 ease-in-out border-r dark:border-cool-gray-700 overflow-x-hidden"
        >
          <div class="relative p-4 h-full z-10">
            <div
              class="py-4 rounded-md overflow-x-hidden"
              :class="[isCollapse ? 'bg-gray-900 shadow-md' : '']"
            >
              <p
                class="py-4 text-lg whitespace-nowrap font-bold"
                :class="[isCollapse ? 'text-center bg-green-600 text-white' : '']"
              >{{ isCollapse ? 'F' : 'Fuep template' }}</p>
              <div
                class="mb-4 bg-gray-200 dark:bg-cool-gray-700 transition transition-all duration-300"
                :class="[isCollapse ? 'bg-cool-gray-700' : 'bg-gray-200']"
                style="height: 1px;"
              ></div>
              <el-menu
                router
                :default-active="currentAcvtiveRoute"
                :background-color="themeFlag == 'light' ? 'transparent' : (isCollapse ? '#151930' : '#1f2a37')"
                :text-color="themeFlag == 'light' ? '#374151' : '#ffffff'"
                :active-text-color="themeFlag == 'light' ? '#047857' : '#6EE7B7'"
                :collapse="isCollapse"
                :default-openeds="['1']"
                style="border:none"
              >
                <el-menu-item index="/">
                  <i class="el-icon-pie-chart"></i>
                  <template #title>
                    <span>Dashboard</span>
                  </template>
                </el-menu-item>
                <el-submenu index="1">
                  <template #title>
                    <i class="el-icon-menu"></i>
                    <span>Pages</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/blog">Blog</el-menu-item>
                    <el-menu-item index="/profile">Profile</el-menu-item>
                    <el-menu-item index="/register">Sign up</el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group title="group">
                    <el-menu-item index="/table">Table</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/403">
                  <i class="el-icon-collection-tag"></i>
                  <template #title>403</template>
                </el-menu-item>
                <el-menu-item index="/404">
                  <i class="el-icon-warning-outline"></i>
                  <template #title>404</template>
                </el-menu-item>
                <el-menu-item>
                  <i class="el-icon-link"></i>
                  <template #title>
                    <a href="http://www.fuep.net" target="_blank">物料库</a>
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <i class="el-icon-star-off"></i>
                  <template #title>
                    <a href="https://gitee.com/huoye/fuep-template" target="_blank">源码</a>
                  </template>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
        </el-aside>
        <el-container>
          <el-header
            class="bg-white text-gray-700 dark:bg-cool-gray-900 dark:text-white transition transition-all duration-300 border-b dark:border-cool-gray-700"
          >
            <el-row type="flex" justify="space-between" align="middle" class="h-full">
              <i
                class="text-2xl cursor-pointer"
                :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
                @click="flod"
              ></i>
              <div class="flex flex-row justify-start items-center">
                <i class="el-icon-search mr-6 text-xl cursor-pointer"></i>
                <i
                  class="el-icon-brush mr-6 text-xl cursor-pointer dark:text-green-300"
                  @click="setTheme"
                ></i>
                <i
                  :class="[isFullScreen ? 'el-icon-c-scale-to-original' : 'el-icon-full-screen']"
                  class="mr-6 text-xl cursor-pointer"
                  @click="fullScreen"
                ></i>
                <el-badge type="danger" :value="12" class="mr-12">
                  <i class="el-icon-bell text-xl cursor-pointer"></i>
                </el-badge>
                <el-dropdown>
                  <el-avatar
                    size="medium"
                    src="https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/IMG_20180317_114202F.jpg"
                  ></el-avatar>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <router-link to="/profile">Profile</router-link>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <router-link to="/register">Sign up</router-link>
                      </el-dropdown-item>
                      <el-dropdown-item disabled>exit</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-row>
          </el-header>
          <el-main
            class="flex flex-col pb-0 bg-gray-50 dark:bg-cool-gray-900 dark:text-white transition transition-all duration-300"
          >
            <el-breadcrumb separator-class="el-icon-arrow-right" class="pl-1">
              <el-breadcrumb-item
                v-for="(item,index) in store.state.breadcrumb"
                :to="{ path: item.path }"
              >
                <span class="text-gray-700 dark:text-white">{{ item.name }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
            <div class="flex-grow mt-4 bg-white h-full overflow-y-auto rounded-t-md border">
              <router-view></router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useStore } from 'vuex'
import { onBeforeRouteUpdate } from 'vue-router'
import { ref, toRaw, onMounted, getCurrentInstance } from 'vue'

let store = useStore()
let { proxy } = getCurrentInstance()

let currentAcvtiveRoute = ref('/')
onMounted(() => {
  setTheme(false)
  currentAcvtiveRoute.value = proxy.$route.path
}),

  /**
   * @description 面包屑导航和侧边导航
   * 根据路由元信息中的level属性判断该路由的层级
   * 你可以在route标签中,设置路由的level和name,参考index.vue
   */
  onBeforeRouteUpdate((to, from) => {
    if (!to.meta?.level) {
      return
    }
    let bread = toRaw(store.state.breadcrumb)
    // 1. 已有层级,则替换path和name 2. 已添加的层级有小于新增的层级,则过滤 3. 若新增层级大于所有已有层级,则push
    let result = bread.map(val => {
      if (to.meta.level == val.level) {
        val.name = to.meta.name
        val.path = to.path
      }
      return val
    })
      .sort((a, b) => {
        return a.level - b.level
      })
      .filter(val => {
        return val.level <= to.meta.level
      })
    if (result[result.length - 1].level < to.meta.level) {
      result.push({
        name: to.meta.name,
        path: to.path,
        level: to.meta.level
      })
    }
    store.commit('changeBreadcrumb', result)
  })

// 折叠asdie
let isCollapse = ref(false)
const flod = function() {
  isCollapse.value = !isCollapse.value
}

// 切换明暗主题
let themeFlag = ref('light')
const setTheme = function(isChangeTheme = true) {
  let theme = localStorage.getItem('theme') || 'light'
  themeFlag.value = theme
  if (isChangeTheme) {
    localStorage.setItem('theme', theme == 'light' ? 'dark' : 'light')
    themeFlag.value = theme == 'light' ? 'dark' : 'light'
  }
  if (localStorage.getItem('theme') === 'dark') {
    document.querySelector('html').classList.add('dark')
  } else {
    document.querySelector('html').classList.remove('dark')
  }
}

// 全屏
let isFullScreen = ref(false)
const fullScreen = function() {
  let element = document.documentElement;
  if (isFullScreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    }
  }
  isFullScreen.value = !isFullScreen.value
}
</script>